<template>
  <div>
    <!-- -->
    <div class="dv-decoration-9" style="width: 0px; height: 0px;">
      <svg width="100px" height="100px" style="transform: scale(1.36, 1.36);margin:30px 20px" >
        <defs>
          <polygon
            id="decoration-9-polygon-fbcf309083c5433bab2ed6b51599ea4b"
            points="15, 46.5, 21, 47.5, 21, 52.5, 15, 53.5"
          />
        </defs>
        <circle
          cx="50"
          cy="50"
          r="45"
          fill="transparent"
          stroke-width="10"
          stroke-dasharray="80 100 30 100"
          stroke="#5C9AD6"
        >
          <animateTransform
            attributeName="transform"
            type="rotate"
            values="0 50 50;360 50 50"
            dur="3s"
            repeatCount="indefinite"
          />
        </circle>
        <circle
          cx="50"
          cy="50"
          r="45"
          fill="transparent"
          stroke-width="6"
          stroke-dasharray="50 66 100 66"
          stroke="#00CED1"
        >
          <animateTransform
            attributeName="transform"
            type="rotate"
            values="0 50 50;-360 50 50"
            dur="3s"
            repeatCount="indefinite"
          />
        </circle>
        <circle
          cx="50"
          cy="50"
          r="38"
          fill="transparent"
          stroke="rgba(92,154,214,0.3)"
          stroke-width="1"
          stroke-dasharray="5 1"
        />
        <use
          xlink:href="#decoration-9-polygon-fbcf309083c5433bab2ed6b51599ea4b"
          stroke="#5C9AD6"
          fill="transparent"
        >
          <animateTransform
            attributeName="transform"
            type="rotate"
            values="0 50 50;360 50 50"
            dur="3s"
            begin="0s"
            repeatCount="indefinite"
          />
        </use>
        <use
          xlink:href="#decoration-9-polygon-fbcf309083c5433bab2ed6b51599ea4b"
          stroke="#5C9AD6"
          fill="#00CED1"
        >
          <animateTransform
            attributeName="transform"
            type="rotate"
            values="0 50 50;360 50 50"
            dur="3s"
            begin="0.15s"
            repeatCount="indefinite"
          />
        </use>
        <use
          xlink:href="#decoration-9-polygon-fbcf309083c5433bab2ed6b51599ea4b"
          fill="transparent"
          stroke="#5C9AD6"
        >
          <animateTransform
            attributeName="transform"
            type="rotate"
            values="0 50 50;360 50 50"
            dur="3s"
            begin="0.3s"
            repeatCount="indefinite"
          />
        </use>
        <use
          xlink:href="#decoration-9-polygon-fbcf309083c5433bab2ed6b51599ea4b"
          fill="#00CED1"
          stroke="#5C9AD6"
        >
          <animateTransform
            attributeName="transform"
            type="rotate"
            values="0 50 50;360 50 50"
            dur="3s"
            begin="0.45s"
            repeatCount="indefinite"
          />
        </use>
        <use
          xlink:href="#decoration-9-polygon-fbcf309083c5433bab2ed6b51599ea4b"
          fill="#00CED1"
          stroke="#5C9AD6"
        >
          <animateTransform
            attributeName="transform"
            type="rotate"
            values="0 50 50;360 50 50"
            dur="3s"
            begin="0.6s"
            repeatCount="indefinite"
          />
        </use>
        <use
          xlink:href="#decoration-9-polygon-fbcf309083c5433bab2ed6b51599ea4b"
          fill="transparent"
          stroke="#5C9AD6"
        >
          <animateTransform
            attributeName="transform"
            type="rotate"
            values="0 50 50;360 50 50"
            dur="3s"
            begin="0.75s"
            repeatCount="indefinite"
          />
        </use>
        <use
          xlink:href="#decoration-9-polygon-fbcf309083c5433bab2ed6b51599ea4b"
          fill="transparent"
          stroke="#5C9AD6"
        >
          <animateTransform
            attributeName="transform"
            type="rotate"
            values="0 50 50;360 50 50"
            dur="3s"
            begin="0.9s"
            repeatCount="indefinite"
          />
        </use>
        <use
          xlink:href="#decoration-9-polygon-fbcf309083c5433bab2ed6b51599ea4b"
          stroke="#5C9AD6"
          fill="transparent"
        >
          <animateTransform
            attributeName="transform"
            type="rotate"
            values="0 50 50;360 50 50"
            dur="3s"
            begin="1.05s"
            repeatCount="indefinite"
          />
        </use>
        <use
          xlink:href="#decoration-9-polygon-fbcf309083c5433bab2ed6b51599ea4b"
          fill="#00CED1"
          stroke="#5C9AD6"
        >
          <animateTransform
            attributeName="transform"
            type="rotate"
            values="0 50 50;360 50 50"
            dur="3s"
            begin="1.2s"
            repeatCount="indefinite"
          />
        </use>
        <use
          xlink:href="#decoration-9-polygon-fbcf309083c5433bab2ed6b51599ea4b"
          fill="#00CED1"
          stroke="#5C9AD6"
        >
          <animateTransform
            attributeName="transform"
            type="rotate"
            values="0 50 50;360 50 50"
            dur="3s"
            begin="1.35s"
            repeatCount="indefinite"
          />
        </use>
        <use
          xlink:href="#decoration-9-polygon-fbcf309083c5433bab2ed6b51599ea4b"
          stroke="#5C9AD6"
          fill="transparent"
        >
          <animateTransform
            attributeName="transform"
            type="rotate"
            values="0 50 50;360 50 50"
            dur="3s"
            begin="1.5s"
            repeatCount="indefinite"
          />
        </use>
        <use
          xlink:href="#decoration-9-polygon-fbcf309083c5433bab2ed6b51599ea4b"
          stroke="#5C9AD6"
          fill="transparent"
        >
          <animateTransform
            attributeName="transform"
            type="rotate"
            values="0 50 50;360 50 50"
            dur="3s"
            begin="1.65s"
            repeatCount="indefinite"
          />
        </use>
        <use
          xlink:href="#decoration-9-polygon-fbcf309083c5433bab2ed6b51599ea4b"
          stroke="#5C9AD6"
          fill="transparent"
        >
          <animateTransform
            attributeName="transform"
            type="rotate"
            values="0 50 50;360 50 50"
            dur="3s"
            begin="1.8s"
            repeatCount="indefinite"
          />
        </use>
        <use
          xlink:href="#decoration-9-polygon-fbcf309083c5433bab2ed6b51599ea4b"
          fill="transparent"
          stroke="#5C9AD6"
        >
          <animateTransform
            attributeName="transform"
            type="rotate"
            values="0 50 50;360 50 50"
            dur="3s"
            begin="1.95s"
            repeatCount="indefinite"
          />
        </use>
        <use
          xlink:href="#decoration-9-polygon-fbcf309083c5433bab2ed6b51599ea4b"
          fill="#00CED1"
          stroke="#5C9AD6"
        >
          <animateTransform
            attributeName="transform"
            type="rotate"
            values="0 50 50;360 50 50"
            dur="3s"
            begin="2.1s"
            repeatCount="indefinite"
          />
        </use>
        <use
          xlink:href="#decoration-9-polygon-fbcf309083c5433bab2ed6b51599ea4b"
          fill="#00CED1"
          stroke="#5C9AD6"
        >
          <animateTransform
            attributeName="transform"
            type="rotate"
            values="0 50 50;360 50 50"
            dur="3s"
            begin="2.25s"
            repeatCount="indefinite"
          />
        </use>
        <use
          xlink:href="#decoration-9-polygon-fbcf309083c5433bab2ed6b51599ea4b"
          fill="transparent"
          stroke="#5C9AD6"
        >
          <animateTransform
            attributeName="transform"
            type="rotate"
            values="0 50 50;360 50 50"
            dur="3s"
            begin="2.4s"
            repeatCount="indefinite"
          />
        </use>
        <use
          xlink:href="#decoration-9-polygon-fbcf309083c5433bab2ed6b51599ea4b"
          stroke="#5C9AD6"
          fill="transparent"
        >
          <animateTransform
            attributeName="transform"
            type="rotate"
            values="0 50 50;360 50 50"
            dur="3s"
            begin="2.55s"
            repeatCount="indefinite"
          />
        </use>
        <use
          xlink:href="#decoration-9-polygon-fbcf309083c5433bab2ed6b51599ea4b"
          fill="#00CED1"
          stroke="#5C9AD6"
        >
          <animateTransform
            attributeName="transform"
            type="rotate"
            values="0 50 50;360 50 50"
            dur="3s"
            begin="2.7s"
            repeatCount="indefinite"
          />
        </use>
        <use
          xlink:href="#decoration-9-polygon-fbcf309083c5433bab2ed6b51599ea4b"
          stroke="#5C9AD6"
          fill="transparent"
        >
          <animateTransform
            attributeName="transform"
            type="rotate"
            values="0 50 50;360 50 50"
            dur="3s"
            begin="2.85s"
            repeatCount="indefinite"
          />
        </use>
        <circle
          cx="50"
          cy="50"
          r="26"
          fill="transparent"
          stroke="rgba(92,154,214,0.3)"
          stroke-width="1"
          stroke-dasharray="5 1"
        />
      </svg>
      <div style="" class="title-view">
        <p style="color: rgb(255, 255, 255); font-size: 20px;width:100px;text-shadow: 2px 2px 2px #fff;">告警总数</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "MapviewAa",

  data() {
    return {};
  },

  mounted() {},

  methods: {},
};
</script>
<style scoped>
  .title-view{
    
  }
</style>